<template>
    <div class="item-box">
      <div class="item-title">
        <i :style="{color: colorName}" :class="data.icon"></i>
        <span class="title">{{data.title}}</span>
        <span class="type">（{{data.type}}）</span>
      </div>
      <div class="item-content">
        <span class="money" v-if="data.showMoneyIcon">￥</span>
        <span class="text">{{data.text}}</span>
      </div>
      <div class="item-bottom">
        <div class="item">
          <span class="title">同比</span>
          <div v-if="data.yearTrend==='down'" class="num" style="color: #6BB05B">
            <i class="el-icon-caret-bottom"></i>
            <span>{{data.yearContrast}}%</span>
          </div>
          <div v-if="data.yearTrend==='up'" class="num" style="color: #DE7C1E">
            <i class="el-icon-caret-top"></i>
            <span>{{data.yearContrast}}%</span>
          </div>
          <div v-if="data.yearTrend==='flat'" class="num" style="color: #666666">
            <i class="el-icon-minus"></i>
            <span>{{data.yearContrast}}%</span>
          </div>
        </div>

        <div class="item">
          <span class="title">环比</span>
          <div v-if="data.monthTrend==='down'" class="num" style="color: #6BB05B">
            <i class="el-icon-caret-bottom"></i>
            <span>{{data.monthContrast}}%</span>
          </div>
          <div v-if="data.monthTrend==='up'" class="num" style="color: #DE7C1E">
            <i class="el-icon-caret-top"></i>
            <span>{{data.monthContrast}}%</span>
          </div>
          <div v-if="data.monthTrend==='flat'" class="num" style="color: #666666">
            <i class="el-icon-minus"></i>
            <span>{{data.monthContrast}}%</span>
          </div>
        </div>

      </div>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    export default {
        name: "consumptionItem",
        props: {
            data: {
                type: Object,
                default() {
                    return {
                        icon: 'el-icon-picture-outline',
                        title: '交易次数',
                        type: '次',
                        showMoneyIcon: false,
                        text: '409,152',
                        yearContrast: '28.52',
                        yearTrend: 'up',//up down flat
                        monthContrast: '66.76',
                        monthTrend: 'down'
                    }
                }
            }
        },
        computed: {
            ...mapGetters(["colorName"]),
        }
    }
</script>

<style lang="scss" scoped>
.item-box {
  width: calc(25% - 32px);
  max-width: 204px;
  height: 120px;
  padding: 21px 16px;
  background: #FAFBFC;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .item-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    i {
      font-size: 24px;
    }
    .title {
      margin:  0 0 0 5px;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
    }
    .type {
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      font-weight: 400;
      color: #9e9e9e;
    }
  }
  .item-content {
    height: 27px;
    .money {
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      line-height: 36px;
    }
    .text {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
      line-height: 36px;
    }
  }
  .item-bottom {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      display: flex;
      flex-direction: row;
      height: 20px;
      .title {
        height: 20px;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
      .num {
        height: 20px;
        margin-left: 3px;
        font-size: 14px;
        font-family: Lato;
        font-weight: 400;
        color: #6BB05B;
      }
    }
  }
}
</style>
